/*
 * @Author: your name
 * @Date: 2022-01-06 17:57:34
 * @LastEditTime: 2022-04-02 11:05:58
 * @LastEditors: your name
 * @Description: 管理端主页面
 * @FilePath: \web\src\router\adminUserPage\index.jsx
 */
import React, { useState } from "react";
import "./index.css";
import {Outlet, useNavigate } from 'react-router-dom';
import { Menu } from "antd";
import Header from "../../components/header";
// import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

const { SubMenu } = Menu;
// submenu keys of first level
const rootSubmenuKeys = ["sub1", "sub2", "sub4"];

const AdminUserPage = () => {
  const [openKeys, setOpenKeys] = useState(["sub1"]);
  const navigate = useNavigate();
  const onClick = ({key}) => {
    navigate(key);
  }

  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <div className="adminPage">
      <Header />
      <div className="context">
        <Menu
          mode="inline"
          openKeys={openKeys}
          onOpenChange={onOpenChange}
          onClick = {onClick}
          style={{ width: 240 }}
        >
          <SubMenu key="sub1" title="管理员">
            <Menu.Item key="adminEdit">新增管理员</Menu.Item>
            <Menu.Item key="adminList">管理员列表</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title="教师">
            <Menu.Item key="teacherCreate">新增教师</Menu.Item>
            <Menu.Item key="teacherList">教师列表</Menu.Item>
          </SubMenu>
          <SubMenu key="sub4" title="学生">
            <Menu.Item key="studentCreate">新增学生</Menu.Item>
            <Menu.Item key="studentList">学生列表</Menu.Item>
          </SubMenu>
        </Menu>
        <div className="container">
          <Outlet />
        </div>
      </div>
    </div>
  );
};

export default AdminUserPage;
